<template>
	<div>
		<section class="login_message">
		  <input type="text" placeholder="手机号" v-model="phone">
		  <button @click.prevent="getCode" :disabled="!checkPhone" class="get_verification" :class="{phoneRight:checkPhone}">{{seconds>0?`${seconds}秒`:'获取验证码'}}</button>
		</section>
		<section class="login_verification">
		  <input type="text" maxlength="8" placeholder="验证码">
		</section>
		<section class="login_hint">
		  温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
		  <a href="javascript:;">《用户服务协议》</a>
		</section>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				phone:'13266325261',
				seconds:0,
			}
		},
		computed:{
			checkPhone(){
				let reg = /^1[3-9]{1}\d{9}$/
				return reg.test(this.phone)
			}
		},
		methods:{
			// 获取验证码
			getCode(){
				if(!this.seconds){ // 0 = false, 取反 = true 执行, 有秒数时为true取反为false则不执行
					this.seconds = 5
					const timer = setInterval(()=>{
						
						this.seconds--
						console.log(this.seconds,typeof this.seconds)
						if(this.seconds <= 0){
							console.log('clear')
							clearInterval(timer)
						}
					},1000)
				}
			},
			// 显示与隐藏密码
			showPwdChange(){
				this.pwdShow = !this.pwdShow
			}
		}
	}
</script>

<style lang="stylus">
	
</style>